<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>MVC is Fun</title>

    <style type="text/css">
      #map-canvas {
        height: 500px;
      }
	  #map-canvas2 {
        height: 500px;
      }
    </style>

    <script type="text/javascript"
        src="http://www.google.com/jsapi?autoload={'modules':[{name:'maps',version:3,other_params:''}]}"></script>
	<script type="text/javascript"
        src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script type="text/javascript">
		var ne = null;
		var sw = null;
		var myMap;
		var geocoder = null;
		function init() {
			geocoder = new google.maps.Geocoder();
			var mapDiv = document.getElementById('map-canvas');
			myMap = new google.maps.Map(mapDiv, {
				  center: new google.maps.LatLng(15.120011, 108.808937),
				  zoom: 10
			});

			geocoder.geocode({'address':'quan phu nhuan'}, function(rslt, status)
			{
				if (status == google.maps.GeocoderStatus.OK) {
					sw = rslt[0].geometry.location;
					myMap.setCenter(sw);
				}
			});
			
			geocoder.geocode({'address':'quan binh thanh'}, function(rslt, status)
			{
				if (status == google.maps.GeocoderStatus.OK) {
					ne = rslt[0].geometry.location;
					myMap.setCenter(ne);
				}
			});
		}
		
		function codeAddress() {
			var address = document.getElementById("address").value;
			var myBound = new google.maps.LatLngBounds(sw, ne);
			var rectangle = new google.maps.Rectangle(
			{
				map: myMap,
				bounds: myBound
			});
			geocoder.geocode( { 'address': address, 'bounds': myBound, 'region': 'hos'}, function(results, status) {
			  if (status == google.maps.GeocoderStatus.OK) {
				myMap.setCenter(results[0].geometry.location);
				var marker = new google.maps.Marker({
					map: myMap,
					position: results[0].geometry.location
				});
			  } else {
				alert("Geocode was not successful for the following reason: " + status);
			  }
			});
		}
		
		google.maps.event.addDomListener(window, 'load', init);
    </script>
  </head>
  <body>
    <form>
	<div id="map-canvas"></div>
	<div>
		<input id="address" type="textbox" value="">
		<input type="button" value="Encode" onclick="codeAddress()">
	</div>
	</form>
  </body>
</html>